<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
        <el-form-item label="案件编号" prop="ajbh">
          <el-input
            v-model="queryParams.ajbh"
            placeholder="请输入案件编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="案件名称" prop="ajmc">
          <el-input
            v-model="queryParams.ajmc"
            placeholder="请输入案件名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="被扣押单位名称" prop="hsr">
          <el-input
            v-model="queryParams.ky_kydw"
            placeholder="请输入被扣押单位名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="扣押款持有人姓名" prop="hsr">
          <el-input
            v-model="queryParams.hsr"
            placeholder="请输入扣押款持有人姓名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="AddAj">新增案件</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="!form.xh" @click="handleUpdate">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="!form.xh" @click="handleDelete">删除</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
  <!--  @current-change="tableCurrentChange" -->
  <el-row :gutter="20">
    <el-col :span="24" :xs="24">

  <div class="table-container">  
      <el-table v-loading="loading" :data="bzjtableList"  style="height: 465px; overflow-y: auto;">
        <el-table-column label="案件编号" align="center" prop="ajbh"  />
        <el-table-column label="案件名称" align="center" prop="ajmc" />
        <!-- <el-table-column label="案件性质" align="center" prop="ajxz" /> -->
        <el-table-column label="办案单位" align="center" prop="badw"  />
        <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
            <template slot-scope="scope" >
              <el-button type="primary" @click="handleAdd(scope)" >新增</el-button>
              <el-button type="warning" @click="selectKyk(scope)" >查看</el-button>
            </template>
          </el-table-column>
      </el-table>
  </div>
    </el-col>
    <el-col :span="24" :xs="24">
<div class="table-container">  
    <el-table v-loading="loading1" :data="kykTablelist"  style="height: 200px; overflow-y: auto;">
      <!-- <el-table-column label="案件编号" align="center" prop="ajbh"  width="100px"/> -->
      <el-table-column label="案件名称" align="center" prop="ajmc"  />
      <el-table-column label="扣押持有人" align="center" prop="ky_kykcyr" />
      <el-table-column label="扣押单位名称" align="center" prop="ky_kydw" />
      <el-table-column label="扣押款持有人姓名" align="center" prop="hsr" />
      <el-table-column label="扣押编号" align="center" prop="ky_bh"/>
      <el-table-column label="扣押收取方式" align="center" prop="ky_sqfs"/>
      <el-table-column label="扣押金额" align="center" prop="kyje" />
      <el-table-column label="开户名称" align="center" prop="ky_khmc"/>
      <el-table-column label="开户行" align="center" prop="ky_khh"/>
      <el-table-column label="银行账号" align="center" prop="ky_yhzh"/>
      <el-table-column label="币种" align="center" prop="kydw" />
      <el-table-column label="办案人" align="center" prop="ky_sqczr"/>      
      <el-table-column label="办案人联系方式" align="center" prop="ky_sqczrlxfs"/>
      <el-table-column label="扣押收取日期" align="center" prop="ky_sqrq" />
      <!-- <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="scope" >
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd(scope)" >新增</el-button>
          </template>
        </el-table-column> -->
    </el-table>
</div>
  </el-col>
  </el-row>


  <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
         <!-- 添加或修改【请填写功能名称】对话框 -->
        <el-dialog title="新增扣押款信息" :visible.sync="open" width="75%" @closed="gb">
          <el-form ref="form" :inline="true" :model="form" :rules="ruless" label-width="auto" :hide-required-asterisk="true"  class="creation demo-form-inline">
            <el-row :gutter="20">
              <el-col :span="24">
            <el-divider content-position="center">案件信息</el-divider>
          </el-col>
          <!-- <el-col :span="8">
        <el-form-item label="序号">
          <el-input v-model="form.xh"  :disabled="true"  style="width: 100%"/>
        </el-form-item>
          </el-col> -->
          <el-col :span="8">
        <el-form-item label="案件编号">
          <el-input v-model="form.ajbh"  :disabled="true" />
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="案件名称">
          <el-input v-model="form.ajmc"  :disabled="true" />
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="办案单位">
          <el-input v-model="form.badw"  :disabled="true" />
        </el-form-item>
          </el-col>
          
          <el-col :span="24">
            <el-divider content-position="center">扣押信息</el-divider>
          </el-col>
          <el-col :span="8">
            <el-form-item label="扣押款持有人类别" prop="ky_kykcyr">
        <el-select v-model="form.ky_kykcyr" placeholder="请选择扣押款持有人类别">
            <el-option v-for="item in [{ id: 1, name: '个人' }, { id: 2, name: '企业' }]"
              :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="扣押单位名称" prop="ky_kydw"  v-if="form.ky_kykcyr === '企业'">
          <el-input v-model="form.ky_kydw" placeholder="请输入扣押单位名称"/>
        </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- <el-form-item label="被取保候审人(被行政拘留人)" prop="hsr" v-if="form.ky_kykcyr === '个人'"> -->
              <el-form-item label="扣押款持有人姓名" prop="hsr" v-if="form.ky_kykcyr === '个人'">
          <el-input v-model="form.hsr" placeholder="请输入扣押款持有人姓名"/>
        </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
        <el-form-item label="姓名" prop="hsrxm" v-if="form.ky_kykcyr === '个人'">
          <el-input v-model="form.hsrxm" placeholder="姓名" style="width: 115%"/>
        </el-form-item>
          </el-col> -->
          <el-col :span="8">
        <el-form-item label="身份证号" prop="ky_hsrsfzh" v-if="form.ky_kykcyr === '个人'">
          <el-input v-model="form.ky_hsrsfzh" placeholder="请输入身份证号" />
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="扣押金额" prop="kyje">
          <el-input v-model="form.kyje" placeholder="请输入扣押金额"/>
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="币种" prop="kydw">
          <el-select v-model="form.kydw"  clearable  placeholder="请选择币种">
            <el-option
          v-for="item in dict.type.ky_kydw"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        />
            </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收款方式" prop="ky_sqfs">
        <el-select v-model="form.ky_sqfs" placeholder="请选择收款方式" >
            <el-option v-for="item in [{ id: 1, name: '扫码交款' }, { id: 2, name: '转账' }, { id: 3, name: '现金存款' }]"
              :key="item.id" :label="item.name" :value="item.name"></el-option>

            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.ky_sqfs === '转账'">
        <el-form-item label="开户名称" prop="ky_khmc">
          <el-input v-model="form.ky_khmc" placeholder="请输入开户名称" />
        </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.ky_sqfs === '转账'">
        <el-form-item label="开户行" prop="ky_khh">
          <el-input v-model="form.ky_khh" placeholder="请输入扣押开户行" />
        </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.ky_sqfs === '转账'">
        <el-form-item label="银行账号" prop="ky_yhzh">
          <el-input v-model="form.ky_yhzh" placeholder="请输入银行账号"/>
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="办案人" prop="ky_sqczr">
          <el-input v-model="form.ky_sqczr"   placeholder="请输入办案人" />
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="办案人联系方式" prop="ky_sqczrlxfs">
          <el-input v-model="form.ky_sqczrlxfs"   placeholder="请输入办案人联系方式" />
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="扣押收取日期" prop="ky_sqrq">
          <el-date-picker clearable v-model="form.ky_sqrq" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择扣押收取日期"></el-date-picker>
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="委托人" prop="ky_wtr">
          <el-input v-model="form.ky_wtr"   placeholder="请输入委托人" />
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="委托人身份证号" prop="ky_wtrsfzh">
          <el-input v-model="form.ky_wtrsfzh"   placeholder="请输入委托人身份证号" />
        </el-form-item>
          </el-col>
          <el-col :span="24">
        <el-form-item label="附件选择" prop="files">
          <Upload v-model="form.files" :data="{}" acceptTip="*仅图片、PDF类型文件可在线预览"
             multiple ></Upload>
        </el-form-item>
          </el-col>

          <!-- <div class="middle-wrapper">
            <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddDetails"
              >
                添加
              </el-button>
              <el-button
                type="warning"
                icon="el-icon-delete"
                size="mini"
                @click="handleDeleteDetails"
              >
                删除
              </el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDeleteAllDetails"
              >
                清空
              </el-button>
            </div> -->
            <!-- <div class="bottom-wrapper" style="margin-top: 15px;">
              <el-table
                :data="outData2"
                ref="timePeriodRef"
                :row-class-name="rowClassName"
                @selection-change="handleDetailSelectionChange"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                border
               
              >
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="kymc" label="物品名称"  width="300">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.kymc" style="width: 100%;"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="kylx" label="物品类型"  width="280">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.kylx" placeholder="请选择">
                      <el-option label="货币有价证券" value="1"></el-option>
                      <el-option label="其他" value="2"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="kydw" label="单位"  width="280">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.kydw"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="kysl" label="数量" width="280">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.kysl"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="kyje" label="扣押金额" width="280">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.kyje"></el-input-number>
                  </template>
                </el-table-column>
              </el-table>
            </div> -->
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addkyk">新增</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


             <!-- 新增案件对话框 -->
        <el-dialog title="新增案件" :visible.sync="openAddAj" width="50%">
          <el-form ref="ky_table" :inline="true" :model="ky_table" label-width="auto" :hide-required-asterisk="true"  class="creation demo-form-inline">
            <el-row :gutter="20">
              <el-col :span="24">
            <el-divider content-position="center">案件信息</el-divider>
          </el-col>
          <el-col :span="8">
        <el-form-item label="案件编号">
          <el-input v-model="ky_table.ajbh" placeholder="请输入案件编号" style="width: 100%"/>
        </el-form-item>
          </el-col>
          <el-col :span="8">
        <el-form-item label="案件名称">
          <el-input v-model="ky_table.ajmc" placeholder="请输入案件名称" style="width: 100%"/>
        </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="办案单位" prop="badw">
          <el-select v-model="ky_table.badw" placeholder="请选择办案单位" style="width: 100%">
            <el-option 
            v-for="item in options"
              :key="item.id" 
              :label="item.name" 
              :value="item.name"
            />
          </el-select>
        </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
        <el-form-item label="案件性质" prop="ky_table.ajxz" style="width: 100%">
          <selectMultiple ref="selectMultiple" :options="directoryList" @selectVal="selectVal" :multiple="false" placeholder="请选择案件性质"
            :isTree="true" selectableRange="code"  style="width: 100%"></selectMultiple>
        </el-form-item>
      </el-col> -->
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insertAj(ky_table)">新增</el-button>
        <el-button @click="openAddAj = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog :title="tit" :visible.sync="open" width="80%" @closed="gb">
      <el-table>
      </el-table>
    </el-dialog> -->

    </div>
  </template>
  
  <script>
  import { selectBzj , addSeizure,kywpList,addAjxzTree,insertKyajTable,kyList } from "@/api/system/bzjtable";
  import selectMultiple from '@/views/collect/addSecurity/selectMultiple'
  import Upload from './KyUpload'
  export default {
    name: "Bzjtable",
    dicts: ['sys_type','ky_kydw'],
    data() {
      let amount = (rule, value, callback) => {
      if (value) {
        if (!/^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/.test(value)) return callback(new Error('请输入非负数、最多含两位小数'))
        if (value <= 0) return callback(new Error('扣押金额应大于0'))
        if (value > 999999999999.99) return callback(new Error('扣押金额不能超过999999999999.99'))
      } else {
        return callback(new Error('请输入扣押金额'))
      }
      callback()
    }
    let isValuePresent = (rule, value, callback) => {  
      if (value) {  
        callback();  
      }  else{
        return callback(new Error('请输入办案人'));  
      }
    }
    let isValuePresent1 = (rule, value, callback) => {  
      if (value) {  
        callback();  
      }  else{
        return callback(new Error('请输入扣押物品名称'));  
      }
    }
    let dialogVisible = (rule, val, callback) => {
      if (!val) callback(new Error('请输入手机号'))
      let exp = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/)
      if (!exp.test(val)) {
        return callback(new Error('手机号格式不对'))
      }
      return callback()
    }
    let dialogVisibleFile = (rule, value, callback) => {
      console.log(value?.length, ';');
      if (rule.required) {
        if (value?.length) {
          callback()
        } else {
          return callback(new Error('请选择文件'))
        }
      }
      callback()
    }
      return {
        // 遮罩层
        loading: true,
        loading1: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        bzjtableList: [],
        kykTablelist:[],
        clickedRowData: null,
        // 弹出层标题
        title: "",
        // 日期范围
        dateRange: [],
        directoryList: [],
        // 是否显示弹出层
        open: false,
        dialogOpen: false,
        openAddAj : false,
        outData2: [],
		    //选中的从表数据
        checkedDetail: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          ajbh: null,
          ajmc: null,
          ky_kydw:null,
          hsr:null,
        },
        queryParams1: {
          ajbh: null,
          ajmc: null,
          ky_kydw:null,
          hsr:null,
        },
        // 表单参数
        form: {
          xh : null,
          ajmc : null,
          ajbh : null,
          hsr : null,
          ky_type : null,
          ky_mc : null,
          ky_sl : 1,
          kyje : null,
          ky_sqrq : null,
          ky_sqczr : null
        },
        ky_table: {
        },
        currentIndex: '',
      // 表单校验
      ruless: {
        ky_kykcyr: [{ required: true, trigger: 'change',message: '请选择扣押款持有人类别' }],
        hsr: [{ required: true, trigger: 'change',message: '请输入候审人' }],
        ky_kydw: [{ required: true, trigger: 'change',message: '请输入扣押单位名称' }],
        ky_khmc: [{ required: true, trigger: 'change',message: '请输入开户名称' }],
        ky_khh: [{ required: true, trigger: 'change',message: '请输入开户行' }],
        ky_yhzh: [{ required: true, trigger: 'change',message: '请输入银行账号' }],
        kydw: [{ required: true, trigger: 'change',message: '请选择币种' }],
        ky_sqfs: [{ required: true, trigger: 'change',message: '请选择收取方式' }],
        ky_sqczrlxfs: [{ required: true, validator: dialogVisible, trigger: 'change' }],
        kyje: [{ required: true, validator: amount, trigger: 'change' }],
        ky_sqczr: [{ required: true, validator: isValuePresent, trigger: 'change' }],
        ky_sqczrlxfs: [{ required: true, validator: isValuePresent, trigger: 'change' }],
        // ky_mc: [{ required: true, validator: isValuePresent1, trigger: 'change' }],
        files: [{ required: true, validator: dialogVisibleFile, trigger: 'change' }]
      },
      options:[{ id: 1, name: '黑河市公安局直属分局'},  
      { id: 2, name: '黑河市公安局法制大队'}, 
      { id: 2, name: '哈尔滨市公安局直属分局'},]
        // option: [{
        //   mszt: '1',
        //   label: '已没收'
        // }, {
        //   mszt: '0',
        //   label: '未没收'
        // }],
        // mszt: '',
        // options: [{
        //   msshzt: '1',
        //   label: '正在审核'
        // }, {
        //   msshzt: '2',
        //   label: '审核通过'
        // }, {
        //   msshzt: '3',
        //   label: '审核未通过'
        // }],
        // msshzt: ''
      };
    },
    components: {
    selectMultiple,
    Upload
  },
    created() {
      this.getList();
    },
    methods: {
      rowClassName({ row, rowIndex }) {
        row.idx = rowIndex + 1
      },
      handleDetailSelectionChange(selection) {
        if (selection.length > 1) {
          this.$refs.timePeriodRef.clearSelection()
          this.$refs.timePeriodRef.toggleRowSelection(selection.pop())
        } else {
          this.checkedDetail = selection
        }
      },
      handleAddDetails() {
        if (this.outData2 == undefined) {
          this.outData2 = new Array()
        }
        let obj = {}
        // obj.keMc = ''
        // obj.kyType = ''
        // obj.kyDw = null
        // obj.kySl = ''
        // obj.je = ''
        obj.ajbh = ''
        obj.kymc = ''
        obj.kylx = ''
        obj.kydw = ''
        obj.kysl = ''
        obj.kyje = ''
        
        this.outData2.push(obj)
      },
      handleDeleteDetails() {
        if (this.checkedDetail.length == 0) {
          this.$alert('请先选择要删除的数据', '提示', {
            confirmButtonText: '确定',
          })
        } else {
          this.outData2.splice(this.checkedDetail[0].idx - 1, 1)
        }
      },
      handleDeleteAllDetails() {
        this.outData2 = []
      },


      handleChange(value) {
        console.log(value);
      },
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true;
        selectBzj(this.queryParams).then(response => {
          this.bzjtableList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        this.queryParams1.ajbh=this.queryParams.ajbh
        this.queryParams1.ajmc=this.queryParams.ajmc
        this.queryParams1.ky_kydw=this.queryParams.ky_kydw
        this.queryParams1.hsr=this.queryParams.hsr
      this.loading1=true
      kyList(this.queryParams1).then(response => {
          this.kykTablelist = response.rows;
          // this.total = response.total;
          this.loading1 = false;
        });
      //   addAjxzTree({}).then((res) => {
      //   this.directoryList = res.map(item => {
      //     item.level = 1
      //     item.name = item.label
      //     item.value = item.id
      //     item.children && item.children.forEach((i) => {
      //       i.level = 2
      //       i.name = i.label
      //       i.value = i.id
      //       if (i.children && i.children.length) {
      //         i.children.forEach((k) => {
      //           k.level = 3
      //           k.name = k.label
      //           k.value = k.id
      //         })
      //       }
      //     })
      //     // this.recursionFun(item)
      //     return item
      //   })
      // })
      },
      /** 新增案件按钮 */
      AddAj(){
        this.openAddAj = true
      },
    //   selectVal(val) {
    //   this.ky_table.ajxz = val
    // },
    insertAj(){
      insertKyajTable(this.ky_table).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.openAddAj = false;
        this.getList();
      });
    },
      // 取消按钮
      cancel() {
        this.open = false;
        this.getList();
        this.reset();
      },
      gb() {
      this.getList();
    },
      // 表单重置
      reset() {
        this.form = {
          ajmc : null,
          ajbh : null,
          hsr : null,
          ky_mc : null,
          kyje : null,
          ky_sqrq : null,
          ky_sqczr : null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
    //   tableCurrentChange(row) {
    //     this.form = row
    //     console.log("row111111", row);
    //     kywpList({ajbh:row?.ajbh}).then(res => {
    //       console.log("re", res);
    //     this.outData2 = res.rows
    //   })
    //   this.currentIndex = row?.pIndex
    // },
      /** 新增按钮操作 */
      handleAdd(row) {
        this.tit = "添加扣押款";
        this.clickedRowData = row.row;        
        this.form = row.row
      //   kywpList({ajbh:row.row.ajbh}).then(res => {
      //   this.outData2 = res.rows
      // })
      this.currentIndex = row?.pIndex
      this.open = true;
    },
    /**新增 */
    addkyk(){
      this.$refs.form.validate(valid => {
        if (valid) {
          // if (this.form.xh != null) {
    //  this.outData2.forEach((item) => {
    //     item.ajbh= row.ajbh
    //   })
    //  row.kywpTableList = this.outData2

    addSeizure(this.form).then(response => {
      debugger
      if (response.code == 200) {
            this.$modal.msgSuccess("扣押成功");
            this.open =false;
            this.title = "新增";
            this.getList();
            this.reset();
        }
      })
        // }
        } else {
                // 表单验证失败，给出提示信息  
                this.$message.error('收款失败，请填写必要信息或上传附件！');  
                return false;  
            }
      });
    },
    selectKyk(row){
      this.loading1=true
      this.form.ajbh=row.row.ajbh
      console.log(this.form)
      kyList(this.form).then(response => {
          this.kykTablelist = response.rows;
          this.total = response.total;
          this.loading1 = false;
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.resetForm("queryForm1");
        this.handleQuery();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/bzjtable/export', {
          ...this.queryParams
        }, `bzjtable_${new Date().getTime()}.xlsx`)
      }
    }
  };
  </script>
  <style rel="stylesheet/scss" lang="scss">
@page {
  size: 1220px 880px;
  margin-top: 0mm;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.creation {
  .el-form-item {
    margin-bottom: 15px;
  }
  .el-textarea {
    width: 250px;

  }
  ::v-deep.el-input__inner {
    width: 250px;
  }

  .xx {
    ::v-deep.el-input__inner {
      width: 630px;
    }
  }
}

::v-deep .el-table__body-wrapper::-webkit-srollbar-track {
  background-color: rgba(255, 255, 255, 0);
}

//可设置胶囊宽高
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 12px;
  width: 10px;
  opacity: 0.5;
}

// 设置胶囊色
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #cdd9e6;
}

.box {
  display: flex;
  justify-content: center;
  padding: 40px;
  height: 800px;

  .heade {
    text-align: center;

    >h4 {
      font-weight: 600;
    }

    >h2 {
      margin: 6px 0 5px 0;
      font-weight: 600;
    }
  }

  .cont {
    margin-top: 30px;

    .line {
      width: 100px;
      height: 20px;
      text-align: right;
      margin-left: 30px;
      border-bottom: 1px solid #000;
    }

    .text {
      text-indent: 24px;
      width: 400px;
      line-height: 40px;
      // margin-top: 50px;
      margin: 20px auto;
    }

    .footer {
      width: 400px;
      margin-top: 50px;
      float: right;
      text-align: center;
    }
  }

  .lf {
    width: 300px;
    border: 1px solid #000;
    margin-right: 50px;
    padding: 6px;
  }

  .lr {
    width: 600px;
    padding: 6px;
    border: 1px solid #000;
  }

  ::v-deep.el-form-item {
    margin-bottom: 0;
  }

  // .noBorder {

  //   ::v-deep.el-input__inner:focus {
  //     box-shadow: 0 0 0 0 !important;
  //   }

  //   ::v-deep.el-input__inner {
  //     border-radius: 0 !important;
  //     border: none !important;
  //     border-bottom: 1px solid #dcdfe6 !important;
  //   }
  // }
}

::v-deep .el-table__body .el-table__row.hover-bg td {
  background-color: #cde6f7 !important;
}
.bb {
  padding-top: 40px;

  .box1 {
    position: relative;

    margin: 0 auto;
    // padding: 40px;
    width: 550px;
    height: 700px;
    border: 3px solid #000;
    .box2{
      position: absolute;
  // margin: 0 auto;
  margin: 3px;
    padding: 20px;
    width: 538px;
    height: 688px;
    border: 1px solid #000;

    .heade {
      text-align: center;
margin-top:20px ;
      >h2 {
              margin-top:40px ;
// font-family: monospace;
        // font-weight: 800;
      }

      >h1 {
        // margin-top:20px ;
        margin: 20px 0 20px 0;
        font-weight: 600;
      }
    }

    .cont {
      position: relative;
      margin-top: 50px;
      font-size: 18px;

      .line {
        width: 180px;
        height: 23px;
        text-align: right;
        // margin-left: 30px;
        border-bottom: 1px solid #000;
        font-size: 20px;
      }

      .contu {
        text-indent: 24px;
        line-height: 45px;
        width: 500px;
        font-size: 20px;
        margin: 20px auto;

        >span {
          border-bottom: 1px solid #000;
        }
      }

      .footer {
        position: absolute;
        bottom: -150px;
        right: 30px;
        width: 220px;
        text-align: center;

        .imgs {
          border-radius: 50%;
          position: absolute;
          top: -30px;
          right: 15px;
        }
      }
    }
  }
}
}
::v-deep .demo-form-inline .el-input {
  --el-input-width: 220px !important;
}
// .table-container {  
//   max-height: 70vh; /* 使用视口高度的 80% 作为最大高度，你可以根据需要调整 */  
//   overflow: auto;  
// }
</style>